<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet/less" href="./css/reset.less">
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">
  <link rel="stylesheet/less" href="./css/index.less">
  <link rel="stylesheet/less" href="./css/common.less">
</head>

<body>
  <div class="box">
    <div><img class="tabimg" src="./img/tab.png"></div>
    <header>
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">您好，欢迎您！</a>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li><a href="#">登录</a></li>
                <li class="line">|</li>
                <li><a href="#">注册</a></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">我的订单</a></li>
                <li class="line">|</li>
                <li><a href="#">微博</a></li>
                <li class="line">|</li>
                <li><a href="#">微信</a></li>
                <li class="line">|</li>
                <li><a href="#">收藏本网站</a></li>
                <li class="line">|</li>
                <li><a href="#">购物指南</a></li>
                <li class="line">|</li>
                <li><a href="#">服务热线 0585-88888888</a></li>
              </ul>

            </div>
          </div>


        </div>
      </nav>
    </header>
    <div class="gg">
      <div class="logo">LOGO</div>
      <div class="gg-r">
        <div>
          <form class="search">
            <div class="ipt"><img src="./img/search_06.png"><input type="text" name="chk" id="chk"></div>
            <input type="submit" value="搜索">
          </form>
          <span>热搜商品：洗衣服 拖把 洗衣液 纸巾</span>
        </div>
        <div class="line"></div>
        <div class="myshop"><img src="./img/logo1.png">我的购物车(0)</div>
      </div>
    </div>
    <div class="info-container">
      <div class="goods-info">
        <div class="media">
          <!-- 图片预览区 -->
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img class="slide-img" src="./img/swiper1.png"></div>
              <div class="swiper-slide"><img class="slide-img" src="./img/swiper2.png"></div>
              <div class="swiper-slide"><img class="slide-img" src="./img/swiper3.png"></div>
              <div class="swiper-slide"><img class="slide-img" src="./img/swiper4.png"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

          </div>
          <!-- 统计数量 -->
          <ul class="goods-sales">
            <li>
              <p>销量人气</p>
              <p> 4405 </p>
              <p><i class="iconfont icon-task-filling"></i>销量人气</p>
            </li>
            <li>
              <p>商品评价</p>
              <p>3348</p>
              <p><i class="iconfont icon-comment-filling"></i>查看评价</p>
            </li>
            <li>
              <p>收藏人气</p>
              <p>770</p>
              <p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>
            </li>
            <li>
              <p>品牌信息</p>
              <p>PEIPI</p>
              <p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>
            </li>
          </ul>
        </div>
        <div class="spec">
          <!-- 商品信息区 -->
          <p class="g-name"> 海洋之歌·艺术雕塑摆件 </p>
          <p class="g-desc">白夜通话番外系列《海洋之歌》，温暖治愈 </p>
          <p class="g-price">
            <span>￥67.00</span>
            <span>￥79.00</span>
          </p>
          <div class="g-service">
            <dl>
              <dt>促销</dt>
              <dd>12月好物放送，App领券购买直降120元</dd>
            </dl>
            <dl>
              <dt>服务</dt>
              <dd>
                <span>无忧退货</span>
                <span>快速退款</span>
                <span>免费包邮</span>
                <a href="javascript:;">了解详情</a>
              </dd>
            </dl>
          </div>
          <div class="btnbox">
            <button size="large" class="btn">
              加入购物车
            </button>
            <button size="large" class="btn">
              立即购买
            </button>
          </div>

        </div>
      </div>
      <div class="goods-footer">
        <div class="goods-article">
          <!-- 商品详情 -->
          <div class="goods-tabs">

            <h3>商品详情</h3>

            <div class="goods-detail">
              <!-- 属性 -->
              <ul class="attrs">
                <li>
                  <span class="dt">风格</span>
                  <span class="dd">现代简约、北欧</span>
                </li>
                <li>
                  <span class="dt">材质</span>
                  <span class="dd">其他</span>
                </li>
                <li>
                  <span class="dt">分类</span>
                  <span class="dd">人物摆件</span>
                </li>
              </ul>
              <!-- 图片 -->
              <img src="./img/check.png">
              <img src="./img/bz.png">
              <img src="./img/1.png">
              <img src="./img/2.png">
              <img src="./img/3.png">
              <img src="./img/4.png">
              <img src="./img/5.png">
              <img src="./img/6.png">
              <img src="./img/7.png">
              <img src="./img/8.png">
              <img src="./img/9.png">
              <img src="./img/10.png">
              <img src="./img/11.png">
              <img src="./img/12.png">
            </div>
          </div>
        </div>
        <!-- 24热榜+专题推荐 -->
        <div class="goods-aside">

        </div>
      </div>
    </div>

  </div>
</body>

</html>

<script src="./js/jquery-3.7.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/wow.min.repeat.js"></script>
<script src="./js/swiper-bundle.min.js"></script>
<script src="./js/less.js"></script>
<script>
  var mySwiper = new Swiper('.swiper', {
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

  })        
</script>